<template>
  <div>
    <!-- 头部的新增和搜索 -->
    <div class="top">
      <div class="right">
        <el-button @click="addFn" type="primary">新增</el-button>

        <!-- 选择框 -->
        <!-- value1当前选中的值所组成的数组 -->
        <!-- options可供选择的数组 -->
        <el-select v-model="value1" multiple placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item"
            :label="getChinese(item)"
            :value="item"
          >
          </el-option>
        </el-select>
      </div>
      <div class="left">
        <el-input placeholder="请输入姓名" v-model="searchName"></el-input>
        <el-button @click="searchFn" type="primary">搜索</el-button>
      </div>
    </div>

    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
      <!-- 列是循环获取 -->
      <!--
        列如果是循环获取，那么对于自定义列不友好，可以手动来定义
       -->
      <el-table-column
        v-for="(item, index) in columnArr"
        :key="index"
        :prop="item"
        :label="getChinese(item)"
        width="180"
      >
      <template #default="{ row }"  v-if="item==='sex'">
          <span>{{ row.sex ? "男" : "女" }}</span>
      </template>
      </el-table-column>
    </el-table>

    <div>
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        @current-change="handlePage"
        v-show="columnArr.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getUser } from '../../api'
export default {
  data () {
    return {
      searchName: '',
      pageInfo: {
        limit: 5,
        page: 1,
        name: ''
      },

      tableData: null, // 表格数据
      columnArr: [],
      value1: [],
      total: 0
    }
  },
  computed: {
    options () {
      if (this.tableData !== null) return Object.keys(this.tableData[0])
      else return []
    }
  },
  watch: {
    value1 () {
      console.log(this.value1)
      this.columnArr = this.value1
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    /** 获取表格数据 */
    getList () {
      getUser({ params: this.pageInfo }).then((res) => {
        // 给表格数据赋值
        this.tableData = res.list
        this.total = res.count
        console.log(res)
        // console.log(Object.keys(this.tableData[0]))

        this.columnArr = Object.keys(res.list[0])
      })
    },
    /** 增 */
    addFn () {},
    /** 查 */
    searchFn () {
      // 将输入框绑定的name赋给pageInfo的name属性，后再次获取表格数据
      this.pageInfo.name = this.searchName
      this.getList()
    },
    handlePage (val) {
      this.pageInfo.page = val
      this.getList()
    },
    getChinese (item) {
      switch (item) {
        case 'id':
          return '身份证'
        case 'name':
          return '姓名'
        case 'addr':
          return '住址'
        case 'age':
          return '年龄'
        case 'birth':
          return '生日'
        case 'sex':
          return '性别'
      }
    }
  }
}
</script>

<style lang='less' scoped>
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    .el-input {
      width: 200px;
      padding-right: 10px;
    }
  }
}

::v-deep .el-select {
  width: 500px;
  margin-left: 30px;
}
</style>
